<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      :title="state.type ? '编辑任务' : '新增任务'"
      width="60%"
      align-center
      @close="handleClose"
      @open="openDilaog"
      class="dialogStyle"
    >
      <el-form
        :model="formInline"
        ref="formRef"
        :rules="rules"
        class="demo-form-inline"
        label-width="160px"
      >
        <el-form-item label="任务名称" class="towline" prop="taskName">
          <el-input v-model="formInline.taskName" placeholder="" />
        </el-form-item>
        <el-form-item label="任务代码" class="towline" prop="taskCode">
          <el-input v-model="formInline.taskCode" placeholder="" />
        </el-form-item>
        <el-form-item label="是否关注" class="towline" prop="milestoneStatus">
          <el-radio-group :disabled="state.disabled" v-model="formInline.milestoneStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="-1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务类型" class="towline" prop="taskType">
          <el-select
            v-model="formInline.taskType"
            value-key=""
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in state.taskTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作细项" class="towline" prop="taskContent">
          <el-input v-model="formInline.taskContent" placeholder="" />
        </el-form-item>

        <el-form-item label="计划开始时间" class="towline" prop="planStartTime">
          <el-date-picker
            v-model="formInline.planStartTime"
            type="date"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="计划结束时间" class="towline" prop="planEndTime">
          <el-date-picker
            v-model="formInline.planEndTime"
            type="date"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item
          label="责任部门"
          class="towline"
          prop="responsibleDepartmentId"
        >
          <el-select
            v-model="formInline.responsibleDepartmentId"
            value-key=""
            placeholder=""
            clearable
            @change="changeDepartment"
          >
            <el-option
              v-for="item in state.departmentOptions"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="责任人"
          class="towline"
          prop="responsibleDepartmentId"
        >
          <el-select
            v-model="formInline.responsibleUserId"
            value-key=""
            :disabled="state.disabled"
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in state.userOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提醒相关领导" class="towline" prop="examineUserId">
          <el-select
            v-model="formInline.examineUserId"
            value-key=""
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in state.examineUserList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" class="towline"> </el-form-item>
        <el-form-item
          label="存在的问题及困难"
          class="oneline"
          prop="problemRemark"
          label-width="166px"
        >
          <el-input
            v-model="formInline.problemRemark"
            placeholder=""
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <!-- <el-form-item label="是否超时" class="oneline" prop="milestoneStatus">
          <el-radio-group :disabled="state.disabled" v-model="formInline.milestoneStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="bfProjectSubjectMeetingHandel(formRef)" class="button_view">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { department, projectTask } from '@/api/project.js'

import { ref, reactive, onMounted } from 'vue'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElRadio,
  ElRadioGroup,
  ElMessage
} from 'element-plus'
import { projectConfigApi } from '@/api/project'

const options = [
  { value: '1', label: '普通' },
  { value: '2', label: '加急' },
  { value: '3', label: '平急' },
  { value: '4', label: '特急' },
  { value: '5', label: '特提' }
]
const topicOptions = [
  { value: -1, label: '未完成' },
  { value: 0, label: '进行中' },
  { value: 1, label: '完成' }
]

const rules = {
  taskName: [{ required: true, message: '请选择任务名称', trigger: 'blur' }],

  taskCode: [{ required: true, message: '请输入任务代码', trigger: 'blur' }],
  taskContent: [{ required: true, message: '请输入工作细项', trigger: 'blur' }],
  examineUserId: [
    { required: true, message: '请输入作业状态', trigger: 'blur' }
  ],
  planStartTime: [
    { required: true, message: '请选择计划开始时间', trigger: 'blur' }
  ],
  planEndTime: [
    { required: true, message: '请选择计划结束时间', trigger: 'blur' }
  ],
  responsibleDepartmentId: [
    { required: true, message: '请选择责任部门', trigger: 'blur' }
  ],
  responsibleUserId: [
    { required: true, message: '请选择责任人', trigger: 'blur' }
  ],
  taskType: [{ required: true, message: '请选择任务类型', trigger: 'blur' }]
}

let state = reactive({
  projectId: null,
  projectStageId: null,
  centerDialogVisible: false,
  // 1招标任务2投资任务3租赁任务
  taskTypeOptions: [
    { value: 1, label: '招标任务' },
    { value: 2, label: '投资任务' },
    { value: 3, label: '租赁任务' }
  ],
  userOptions: [],
  examineUserList: [],
  departmentOptions: [],
  disabled: false,
  type: 0
})

const formInline = reactive({
  taskName: null,
  taskCode: null,
  taskContent: null,
  examineUserId: null,
  planStartTime: null,
  planEndTime: null,
  responsibleDepartmentId: null,
  responsibleUserId: null,
  taskType: null,

  problemRemark: null
})

const openDilaog = (row) => {
  // 如果当前是编辑
  if (state.type && formInline.responsibleDepartmentId) {

    getUserByDepartment(formInline.responsibleDepartmentId)
    getLeaderByDepartment(formInline.responsibleDepartmentId)
  }
  //清空数组
  state.userOptions = []
  state.examineUserList = []
  state.departmentOptions = []
  //获取部门
  getdepartmentList()
}
const formRef = ref(null)
const bfProjectSubjectMeetingHandel = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      formInline.planStartTime = formInline.planStartTime + ' 59:59:59'
      formInline.planEndTime = formInline.planEndTime + ' 59:59:59'
      let obj = {
        projectId: state.projectId,
        projectStageId: state.projectStageId,
        ...formInline
      }
      // formInline
      if (state.type) {
        // 编辑

        projectTask.updateTask(obj).then((res) => {
          if (res.code == 200) {
            ElMessage.success('操作成功')
            state.centerDialogVisible = false
            for (let key in formInline) {
              if (key == 'files') {
                formInline[key] = []
              } else {
                formInline[key] = null
              }
            }
          }
        })
      } else {
        //新增
        projectTask.addProjectTask(obj).then((res) => {
          if (res.code === '200') {
            ElMessage.success('操作成功')
            state.centerDialogVisible = false
            for (let key in formInline) {
              if (key === 'files') {
                formInline[key] = []
              } else {
                formInline[key] = null
              }
            }
          }
        })
      }
    }
  })
}
//部门变化拉去人员信息
const changeDepartment = (val) => {
  console.log(val)
  formInline.responsibleUserId=''
  getUserByDepartment(val)
  getLeaderByDepartment(val)
}
//通过部门ID获取人员
const getUserByDepartment = (id) => {
  department.getUserByDepartmentId(id).then((res) => {
    state.userOptions = res?.data || []
  })
}
//通过部门ID获取部门领导
const getLeaderByDepartment = (id) => {
  department.getLeaderByDepartmentId(id).then((result) => {
    state.examineUserList = result?.data || []
  })
}
const emits = defineEmits(['refreshList'])
const handleClose = () => {
  state.centerDialogVisible = false
  for (let key in formInline) {
    if (key === 'files') {
      formInline[key] = []
    } else {
      formInline[key] = null
    }
  }
  emits('refreshList')
}
//获取所有部门信息
const getdepartmentList = () => {
  department.getAllDepartments().then((res) => {
    state.departmentOptions = res?.data || []
  })
}
defineExpose({
  state,
  formInline
})
onMounted(() => {

})
</script>
<style lang="scss" scoped>
.el-dialog__body .el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

</style>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
